﻿<div class="mb-site container">
    <section class="mb-header row flex-items-xs-middle">
        <div class="col-xs-4">
            <div class="mb-header-logo u-align-left">
                <img src="~/images/logo.svg" alt="BikeSharing Logo">
            </div>
        </div>
    </section>

    <section class="mb-hero">
        <article class="mb-hero-banner u-center-container">
            <div class="mb-hero-picture u-center-horizontal">
                <picturex pre="true" alt="Hero image" name="hero"></picturex>
            </div>
            <ul class="mb-hero-list">
                <li class="mb-hero-item">
                    <div class="mb-hero-logo wayp">
                        <img src="~/images/logo_gray.svg" alt="BikeSharing hero logo">
                    </div>
                </li>
                <li class="mb-hero-item">
                    <div class="mb-hero-info wayp">
                        BikeSharing360 is a smart bike sharing system with 10,000 bikes distributed in 650 stations located throughout New York City and Seattle.
                    </div>
                </li>
            </ul>
        </article>
    </section>
    @if (ViewData["Message"] != null)
    {
        <section class="mb-form mb-popular">
            <div class="mb-popular-text">
                Thank you @ViewData["Message"].ToString() - We will notify you when BikeSharing is available in your city.
            </div>
        </section>
    }
    else
    {
        <form asp-action="Email" method="post">
            <section class="mb-form mb-popular">
                <div class="mb-popular-text">
                    Want to know when BikeSharing360 will be available in your ciy? Give us your mail and stay tuned!
                </div>
                <div class="wayp">
                    <div class="mb-popular-subtitle form-field">
                        <label>Email</label>
                        <input id="email" type="email" name="email" />
                    </div>
                    <div class="mb-popular-subtitle form-field">
                        <label>City</label>
                        <select id="city" name="city">
                            <option value="New York" selected>New York</option>
                            <option value="Boston">Boston</option>
                            <option value="Chicago">Chicago</option>
                            <option value="Seattle">Seattle</option>
                            <option value="San Francisco">San Francisco</option>
                            <option value="Barcelona">Barcelona</option>
                            <option value="Mexico City">Mexico City</option>
                        </select>
                    </div>
                    <div class="cta-button">
                        <input type="submit" value="submit" id="submit" />
                    </div>
                </div>
            </section>
        </form>
    }
    <div class="mb-footerb"></div>
    <footer class="mb-footer">
        <div class="mb-site-container">
            <div class="row u-m-0">
                <div class="col-xs-4">
                    <img class="mb-footer-logo" src="~/images/logo_square.svg" alt="BikeSharing Logo">
                    <img class="mb-footer-ms" src="~/images/microsoft.svg" alt="Microsoft Logo">
                </div>
                <div class="col-xs-8 u-align-right">
                    <ul class="mb-footer-menu">
                        <li class="mb-footer-item">
                            <a class="mb-footer-link" href="#hiw">How it Works</a>
                        </li>
                        <li class="mb-footer-item">
                            <a class="mb-footer-link" href="#popular">Intelligent App</a>
                        </li>
                        <li class="mb-footer-item">
                            <a class="mb-footer-link" href="#cities">Cities</a>
                        </li>
                        <li class="mb-footer-item">
                            <a class="mb-footer-link" href="#clients">Our clients</a>
                        </li>
                    </ul>
                    <ul class="mb-footer-menu">
                        <li class="mb-footer-item mb-footer-item--social">
                            <span class="mb-footer-link icon-facebook"></span>
                        </li>
                        <li class="mb-footer-item mb-footer-item--social">
                            <span class="mb-footer-link icon-twitter"></span>
                        </li>
                        <li class="mb-footer-item mb-footer-item--social">
                            <span class="mb-footer-link icon-instagram"></span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mb-footer-info row u-m-0">
                <div class="col-md-7 u-align-left">
                    This is a sample demo application for developers built with educational purposes only. Source code is available at:  <a href="http://mynewdemoGitHublocation" target="_blank">http://mynewdemoGitHublocation</a>
                </div>
                <div class="mb-footer-links col-md-5 u-align-right">
                    <span class="u-ml-10">Terms</span>
                    <span class="u-ml-10">Privacy</span>
                    <span class="u-ml-10">Contact</span>
                </div>
            </div>
        </div>
    </footer>
</div>